<template>
  <quill-editor
    class="editor"
    v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
  >
           
  </quill-editor>
</template>
<script>
import { Editor } from "vue-quill-editor";
export default {
  components: {
    Editor,
  },
  //接收父组件的值
  props:["content"],
  data() {
    return {
      content: null,
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            // ["blockquote", "code-block"],
          ],
        },
         //主题
        // theme: "snow",
        placeholder: "请输入内容"
      },
    };
  },
  methods: {
    onEditorBlur() {
      //失去焦点事件

      console.log("失去焦点", this.content);
      this.$emit("getEditor", this.content);
    },
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件
      this.$emit("getEditor", this.content);
    },
  },
};
</script>   
<style scoped>
    .editor {
        text-align: left;
}
</style>

